<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px" class="formBox searchForm">
            <el-form-item clearable label="医院" prop="hospital">
                <department ref="department" :isHospital="true" :isdepat="true" deptWidth="200px"
                    @refreshData="refreshData">
                </department>
            </el-form-item>
            <el-form-item label="设备编码" prop="equipmentNumber">
                <el-input v-model="queryParams.equipmentNumber" placeholder="请输入设备编码" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="设备名称" prop="deviceName">
                <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="所属机构" prop="organizationName">
                <el-select v-model="queryParams.organizationName" placeholder="所属机构" clearable>
                    <el-option v-for="(dict, index) in organizationNameList" :key="index" :label="dict" :value="dict" />
                </el-select>
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button icon="el-icon-plus" size="mini" @click="addQuery">新增设备编号</el-button>
            </el-form-item>
        </el-form>


        <!-- cameraList -->
        <div v-loading="loading" class="list-group cameraList">
            <el-row :gutter="30" v-if="cameraList && cameraList.length > 0">
                <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="6" v-for="(item, index) in cameraList" :key="index">
                    <div class="list-group-item" @click="editCameraSetting(item)">
                        <!-- <div class="list-group-item__imgBG">
                                <div :style="{ 'background-image': `url(${item.images})` }" alt="">

                                </div>
                            </div> -->

                        <div class="list-group-item__meta">
                            <span class="list-group-item__name">{{ item.name }}</span>

                            <span class="list-group-item__text description">所属机构：{{ getdeptName(item.hospitalId,item,1) }}</span>
                            <span class="list-group-item__text description">科室：{{ getdeptName(item.deptId,item,2) }}</span>
                            <span class="list-group-item__text description">安放地址：{{ item.placementAddress }}</span>
                            <span class="list-group-item__text description">创建时间：{{ item.createTime }}</span>
                            <span class="list-group-item__text description">更新时间：{{ item.updateTime }}</span>
                            <span class="list-group-item__text description">设备状态： <el-tag type="success" effect="plain"
                                    v-if="item.h5Url && item.apiUrl" size="mini">正常</el-tag>
                                <el-tag type="danger" effect="plain" v-else size="mini">待启用</el-tag></span>


                        </div>
                        <div class="list-group-item__label">
                            <span class="list-group-item__label_text"> 编号：{{ item.equipmentNumber }}</span>
                        </div>
                        <div class="list-group-item__btn">
                            <span class="list-group-item__btn_text">编辑</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="30" v-else>
                <div class="nodataContainers">
                    <img class="parent-img" src="@/assets/404_images/404_cloud.png" alt="404" />
                    <div class="nodataContainers-text">暂未关联拍照设备</div>
                </div>
            </el-row>

        </div>


        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            class="cameraListPag" @pagination="getList" />

        <!-- 参数设置 -->
        <el-dialog title="霏图拍照仪参数设置" :visible.sync="FeituSettingDailog" @close="closeFeituSettingDailog" width="50%"
            append-to-body>
            <el-form ref="feituCameraForm" :model="feituCameraForm" :rules="rules" label-width="130px"
                class="feituCameraFormClass">
                <el-row>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="设备编号" prop="equipmentNumber" style="margin-bottom:10px;">
                            {{ feituCameraForm.equipmentNumber }}
                            <!-- <el-input v-model="feituCameraForm.code" placeholder="设备编号" style="width: 100%"></el-input> -->
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="运行环境" prop="operatingEnvironment" style="margin-bottom:10px;"
                            class="compressionRatio">
                            <!-- feituCameraCompressionRatioArr -->
                            <el-radio-group v-model="feituCameraForm.operatingEnvironment">
                                <el-radio :label="1"
                                    style="margin-right:10px;margin-bottom:4px;">外网</el-radio>
                                <el-radio :label="2"
                                    style="margin-right:10px;margin-bottom:4px;">内网</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="设备名称" prop="deviceName" style="margin-bottom:10px;">
                            <el-input v-model="feituCameraForm.deviceName" placeholder="设备名称"
                                style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="所属机构" prop="organizationName" style="margin-bottom:10px;">
                            <!-- <el-input v-model="feituCameraForm.organizationName" placeholder="所属机构"
                                style="width: 100%"></el-input> -->
                                {{ getdeptName(feituCameraForm.hospitalId,feituCameraForm,1) }}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="科室" prop="organizationName" style="margin-bottom:10px;">
                            <!-- <el-input v-model="feituCameraForm.organizationName" placeholder="所属机构"
                                style="width: 100%"></el-input> -->
                            {{ getdeptName(feituCameraForm.deptId,feituCameraForm,2) }}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="安放地址" prop="placementAddress" style="margin-bottom:10px;">
                            <el-input v-model="feituCameraForm.placementAddress" placeholder="安放地址"
                                style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <span class="spanTip">(地址格式:http/https网站域名)</span>
                        <el-form-item label="环境地址" prop="evnUrl" style="margin-bottom:15px;">
                            <el-input v-model="feituCameraForm.evnUrl" placeholder="环境地址" style="width: 100%"
                                :disabled="isAdmin ? false : true"></el-input>
                        </el-form-item>

                    </el-col>
                    <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="display:none;">
                        <span class="spanTip">（H5地址格式：http/https网站域名+'/photoRegister'）</span>
                        <el-form-item label="登记页面H5地址" prop="h5Url" style="margin-bottom:15px;">
                            <el-input v-model="feituCameraForm.h5Url" placeholder="登记页面H5地址" style="width: 100%"></el-input>
                        </el-form-item>

                    </el-col> -->
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="图片上传设置" style="margin-bottom:10px;">
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                                @change="handleCheckAllChange">全选</el-checkbox>
                            <el-checkbox-group v-model="checkedFaceParts" @change="handleCheckedFacePartsChange">
                                <el-checkbox v-for="item in faceParts" :label="item" :key="item.id">{{ item.name
                                }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <span class="spanTip">（API地址格式：http/https网站域名+'/prod-api/system/photo/uploads/yifei/file '）</span>
                        <el-form-item label="上传API地址" prop="apiUrl" style="margin-bottom:15px;">
                            <el-input v-model="feituCameraForm.apiUrl" placeholder="照片上传API地址"
                                style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="原图压缩比" prop="originalImageCompressionRatio" style="margin-bottom:10px;"
                            class="compressionRatio">
                            <!-- feituCameraCompressionRatioArr -->
                            <el-radio-group v-model="feituCameraForm.originalImageCompressionRatio">
                                <el-radio v-for="item in feituCameraCompressionRatioArr" :label="item.value"
                                    :key="item.value" style="margin-right:10px;margin-bottom:4px;">{{ item.value
                                    }}</el-radio>

                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="AI分析图压缩比" prop="aiAnalysisCompressionRatio" style="margin-bottom:10px;"
                            class="compressionRatio">
                            <!-- feituCameraCompressionRatioArr -->
                            <el-radio-group v-model="feituCameraForm.aiAnalysisCompressionRatio">
                                <el-radio v-for="item in feituCameraCompressionRatioArr" :label="item.value"
                                    :key="item.value" style="margin-right:10px;margin-bottom:4px;">{{ item.value
                                    }}</el-radio>

                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="btn-group">
                <el-button type="primary" size="mini" @click="submitForm">保 存</el-button>
            </div>
        </el-dialog>
        <el-dialog title="新增霏图拍照仪编号" :visible.sync="addFeituSettingDailog" @close="closeAddFeituSettingDailog" width="50%"
            append-to-body>
            <el-form ref="addfeituCameraForm" :model="addfeituCameraForm" :rules="addrules" label-width="130px"
                class="feituCameraFormClass">
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="设备编号" prop="equipmentNumber">
                            <el-input v-model="addfeituCameraForm.equipmentNumber" placeholder="设备编号" style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="所属机构" prop="organizationName" >
                            <el-input v-model="addfeituCameraForm.organizationName" placeholder="所属机构"
                                style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="机构地址" prop="address" >
                            <el-input v-model="addfeituCameraForm.address" placeholder="机构地址"
                                style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="安放地址" prop="placementAddress" >
                            <el-input v-model="addfeituCameraForm.placementAddress" placeholder="安放地址"
                                style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="btn-group">
                <el-button type="primary" size="mini" @click="submitForm1">保 存</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { deptNameList } from "@/api/system/dept";
import department from "@/views/components/department/index.vue";
import { listCameraConfig, getCameraInfoByequipmentNumber,addCameraConfig, getCameraOrganizationNames, updateCameraConfig } from "@/api/cameraSetting/cameraSetting";
export default {
    name: "cameraSeeting",
    dicts: [],
    components: {
        department
    },
    data() {
        return {
            addFeituSettingDailog:false,
            FeituSettingDailog: false,
            addfeituCameraForm:{
                equipmentNumber:'',//设备编号
                placementAddress:'',//安放地址
                organizationName:'',//机构名称
                address:'',//机构地址
            },
            feituCameraForm: {
                // midFace: 0,
                // midFaceAi: 0,
                // leftFace: 0,
                // leftFaceAi: 0,
                // rightFace: 0,
                // rightFaceAi: 0,
                uploadSetting: '',
                h5Url: '',
                apiUrl: '',
                equipmentNumber: '',
                deviceName: '',
                organizationName: '',
                placementAddress: '',
                originalImageCompressionRatio: 1,
                aiAnalysisCompressionRatio: 1,
                evnUrl: '',
                operatingEnvironment:1
            },
            feituCameraCompressionRatioArr: [
                { label: '0.3', value: "0.3" },
                { label: '0.4', value: "0.4" },
                { label: '0.5', value: "0.5" },
                { label: '0.6', value: "0.6" },
                { label: '0.7', value: "0.7" },
                { label: '0.8', value: "0.8" },
                { label: '0.9', value: "0.9" },
                { label: '1', value: "1" },
            ],
            checkAll: false,
            checkedFaceParts: [],
            faceParts: [
                { id: 0, name: '正脸原图' },
                { id: 1, name: '正脸AI分析图' },
                { id: 2, name: '左脸原图' },
                { id: 3, name: '左脸AI分析图' },
                { id: 4, name: '右脸原图' },
                { id: 5, name: '右脸AI分析图' },
            ],
            isIndeterminate: true,
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,

            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                hospitalId: '',
                deptId: '',
                equipmentNumber: '',
                deviceName: '',
                organizationName: ''
            },
            organizationNameList: [],//机构集合
            cameraList: [],
            deptNameLists: [],//部门
            // 表单参数
            form: {},
            // 表单校验
            addrules: {
                equipmentNumber: [
                    { required: true, message: "设备编号不能为空", trigger: "blur" },

                ],


            },
            rules: {
                evnUrl: [
                    { required: true, message: "环境地址不能为空", trigger: "blur" },
                    {
                        pattern: /^(http:\/\/)|(https:\/\/).*/i,
                        message: "请输入正确的环境地址",
                        trigger: "blur"
                    }
                ],
                operatingEnvironment: [
                    { required: true, message: "运行环境不能为空", trigger: "blur" },

                ],
                // h5Url: [
                //     { required: true, message: "登记页面H5地址不能为空", trigger: "blur" },
                //     {
                //         pattern: /^(http:\/\/)|(https:\/\/).*/i,
                //         message: "请输入正确的登记页面H5地址",
                //         trigger: "blur"
                //     }
                // ],
                // apiUrl: [
                //     { required: true, message: "照片上传API地址不能为空", trigger: "blur" },
                //     {
                //         pattern: /^(http:\/\/)|(https:\/\/).*/i,
                //         message: "请输入正确的照片上传API地址",
                //         trigger: "blur"
                //     }
                // ]
            }
        };
    },
    created() {
        this.getCameraOrganizationNamesEvent()
    },
    computed: {
        isAdmin() {
            return this.$store.state.user.name === 'admin' ? true : false
        }
    },
    methods: {
        addQuery(){
            this.addFeituSettingDailog=true
            this.addfeituCameraForm={
                equipmentNumber:'',//设备编号
                placementAddress:'',//安放地址
                organizationName:'',//机构名称
                address:'',//机构地址
            }
            //addCameraConfig
        },
        closeAddFeituSettingDailog(){
           this.addFeituSettingDailog=false
        },
        submitForm1:function () {
            this.$refs["addfeituCameraForm"].validate(valid => {
                if (valid) {

                    let params = {
                       ...this.addfeituCameraForm
                    }
                    addCameraConfig(params).then((response) => {
                        if (response.code == 200) {
                            this.$modal.msgSuccess("新增成功");
                            this.addFeituSettingDailog=false
                            this.getList()

                        }
                    })
                }
            });
        },
        // 回显医院及门诊
        getdeptNameList() {
            deptNameList().then((response) => {
                this.deptNameLists = response.data;
                this.getList()
            });
        },
        getdeptName(id,item,type) {
            if (id) {
                const result = this.deptNameLists.find(obj => obj.deptId === id);
                return result.deptName
            } else {
                if(type==1){
                    return item.organizationName
                }else{
                    return "暂未关联"
                }

            }

        },
        refreshData(data) {
            this.queryParams.pageNum = 1;
            this.queryParams.hospitalId = data.hospitalId;
            this.queryParams.deptId = data.deptId;
            this.getdeptNameList()
        },
        getCameraOrganizationNamesEvent() {
            getCameraOrganizationNames().then((response) => {
                if (response.code == 200) {
                    let data = response.data
                    console.log(data)
                    this.organizationNameList = data
                }
            }
            );
        },
        editCameraSetting(row) {
            this.checkedFaceParts = []
            getCameraInfoByequipmentNumber({ equipmentNumber: row.equipmentNumber }).then((response) => {
                if (response.code == 200) {
                    let data = response.data
                    let uploadSetting = data.uploadSetting
                    let uploadSettingArray = []
                    if (uploadSetting) { // 拍照位置，解析遍历
                        uploadSettingArray = _.split(uploadSetting, ',', 10)
                    }
                    uploadSettingArray.forEach((item) => {
                        this.checkedFaceParts.push(this.faceParts[Number(item)])
                    });
                    console.log(response)
                    data.evnUrl = this.getEvnUrl(data.h5Url)
                    // data.operatingEnvironment=data.operatingEnvironment?data.operatingEnvironment:1
                    this.feituCameraForm = data

                    this.FeituSettingDailog = true

                }
            })
            // this.feituCameraForm.equipmentNumber = row.equipmentNumber
            // this.feituCameraForm.deviceName = row.deviceName
            // this.feituCameraForm.organizationName = row.organizationName
            // this.feituCameraForm.placementAddress = row.placementAddress
            // this.FeituSettingDailog = true
        },
        getEvnUrl(str) {
            if (str) {
                return str.replace('/photoRegister', '')
            }
        },
        closeFeituSettingDailog() {
            this.FeituSettingDailog = false
        },
        handleCheckAllChange(val) {
            this.checkedFaceParts = val ? this.faceParts : [];
            this.isIndeterminate = false;
        },
        handleCheckedFacePartsChange(value) {
            console.log("选中了****")
            console.log(value)

            // this.changeArray(value)
            let selectIdsTring = this.getcheckedFacePartsId(value) // 获取选中的id 集合字符串
            let arr = this.checkedFaceParts
            if ((selectIdsTring.indexOf('1') > -1 && selectIdsTring.indexOf('0') == -1)) {
                this.checkedFaceParts.push(this.faceParts[0])
                this.$modal.msgSuccess("您选了正脸分析图，必须选正脸原图~");
            } else if ((selectIdsTring.indexOf('3') > -1 && selectIdsTring.indexOf('2') == -1)) {
                this.checkedFaceParts.push(this.faceParts[2])
                this.$modal.msgSuccess("您选了左脸分析图，必须选左脸原图~");
            } else if ((selectIdsTring.indexOf('5') > -1 && selectIdsTring.indexOf('4') == -1)) {
                this.checkedFaceParts.push(this.faceParts[4])
                this.$modal.msgSuccess("您选了右脸分析图，必须选右脸原图~");
            }
            console.log("this.checkedFaceParts///////////////////////////////////////")
            console.log(this.checkedFaceParts)
            let checkedCount = this.checkedFaceParts.length;
            this.checkAll = checkedCount === this.faceParts.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.faceParts.length;
        },
        changeArray(value) {// 0和1 一组   2和3 一组   4和5 一组
            let selectIdsTring = this.getcheckedFacePartsId(value) // 获取选中的id 集合字符串
            let arr = this.checkedFaceParts
            if ((selectIdsTring.indexOf('1') > -1 && selectIdsTring.indexOf('0') == -1)) {
                this.checkedFaceParts.push({ id: 0, name: '正脸原图' })
                this.$modal.msgSuccess("您选了正脸分析图，必须选正脸原图~");
            } else if ((selectIdsTring.indexOf('3') > -1 && selectIdsTring.indexOf('2') == -1)) {
                this.checkedFaceParts.push({ id: 2, name: '左脸原图' })
                this.$modal.msgSuccess("您选了左脸分析图，必须选左脸原图~");
            } else if ((selectIdsTring.indexOf('5') > -1 && selectIdsTring.indexOf('4') == -1)) {
                this.checkedFaceParts.push({ id: 4, name: '右脸原图' })
                this.$modal.msgSuccess("您选了右脸分析图，必须选右脸原图~");
            }
            console.log("this.checkedFaceParts///////////////////////////////////////")
            console.log(this.checkedFaceParts)
            let checkedCount = this.checkedFaceParts.length;
            this.checkAll = checkedCount === this.faceParts.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.faceParts.length;
        },
        // 编辑保存
        submitForm: function () {
            this.$refs["feituCameraForm"].validate(valid => {
                if (valid) {
                    this.feituCameraForm.h5Url = this.feituCameraForm.evnUrl + '/photoRegister'
                    this.feituCameraForm.apiUrl = this.feituCameraForm.evnUrl + (this.feituCameraForm.operatingEnvironment==2?'/prod-api/system/photo/uploads/yifei/file/local':'/prod-api/system/photo/uploads/yifei/file')
                    let params = {
                        configId: this.feituCameraForm.configId,
                        uploadSetting: this.getcheckedFacePartsId(this.checkedFaceParts),
                        h5Url: this.feituCameraForm.h5Url,
                        apiUrl: this.feituCameraForm.apiUrl,
                        equipmentNumber: this.feituCameraForm.equipmentNumber,
                        deviceName: this.feituCameraForm.deviceName,
                        organizationName: this.feituCameraForm.organizationName,
                        placementAddress: this.feituCameraForm.placementAddress,
                        originalImageCompressionRatio: this.feituCameraForm.originalImageCompressionRatio,
                        aiAnalysisCompressionRatio: this.feituCameraForm.aiAnalysisCompressionRatio,
                        operatingEnvironment:this.feituCameraForm.operatingEnvironment
                    }
                    updateCameraConfig(params).then((response) => {
                        if (response.code == 200) {
                            this.$modal.msgSuccess("修改成功");
                            this.FeituSettingDailog = false
                            this.getList()

                        }
                    })
                }
            });
        },
        getcheckedFacePartsId(array) {
            let ids = []
            array.forEach((item) => {
                ids.push(item.id)
            });
            return ids.join(',')
        },
        getList() {
            listCameraConfig(this.queryParams).then((response) => {
                if (response.code == 200) {
                    let data = response.rows
                    this.total = response.total;
                    this.cameraList = data
                    this.loading = false;
                } else {
                    this.loading = false;
                }
            }
            );
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

    }
};
</script>
<style lang="scss" scoped>
.nodataContainers {
    text-align: center;

    .parent-img {
        display: block;
        margin: 15px auto;
    }

    .nodataContainers-text {
        color: #999;
        text-align: center;
    }
}

.spanTip {
    padding-left: 130px;
    display: block;
    color: red;
    font-size: 12px;
    // text-align: center;
}

.btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
}

::v-deep.cameraListPag .el-pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

::v-deep.compressionRatio .el-radio__label {
    padding-left: 5px;
}

.list-group.cameraList {
    overflow: hidden;
    padding: 20px 10px;

    .list-group-item:hover {
        transform: scale(1.02); //设置图片按照比例放大1.2倍
    }

    .list-group-item {
        box-shadow: 0px 2px 13px 0px rgba(66, 66, 157, 0.6);
        border-radius: 6px;
        // display: flex;
        // align-items: center;
        // padding: 10px;
        margin-bottom: 15px;
        cursor: pointer;
        text-decoration: none;
        display: block;
        position: relative;
        overflow: hidden;
        padding: 0px;
        padding-top: 30px;
        border: none;
        transition: all 0.6s; //设置动画执行的时间为0.6



        &__meta {

            margin-left: 12px;
            flex-shrink: 0;
            flex-grow: 1;
            height: 190px;
            // text-align: center;
        }

        &__name {
            display: block;
            font-size: 16px;
            font-weight: bold;
            color: #333333;
            line-height: 30px;
            // margin-bottom: 10px;
            // width: 75%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        &__label {
            position: absolute;
            top: 0px;
            left: 0px;
            background: #226eff;
            color: #fff;
            font-size: 12px;
            border-top-left-radius: 6px;
            padding: 0 10px;
            height: 20px;
            line-height: 20px;
            text-align: center;

            &_text {
                font-size: 12px;
                transform: scale(0.8);
            }

        }

        &__label.active {
            background: red;
        }

        &__btn {
            position: absolute;
            bottom: 8px;
            left: 50%;
            background: #226eff;
            color: #fff;
            font-size: 12px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            padding: 0 20px;
            border-radius: 4px;
            transform: translateX(-50%);

            &_text {
                font-size: 12px;
            }
        }

        &__text {
            display: block;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            // width: 950px;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 24px;

            .iText {
                font-style: normal;

                // &:last-child {
                //     // margin-left: 20px;
                // }
            }
        }
    }
}
</style>
